<template>
  <div class="screen-bg" :style="{height:screenHeight}">
    <div class="screen-banner">智慧农业物联网平台</div>
    <!-- <div style="height:640px;"> -->
    <el-row type="flex" style="margin-top:40px;">
      <el-col :span="8">
        <div class="pan-left">
          <div class="pan-title">养分监测系统</div>
          <el-row :gutter="20">
            <el-col :span="12">
              <div class="pan-left-each">
                <el-row :gutter="20">
                  <el-col :span="16">
                    <ul>
                      <li>钾离子</li>
                    </ul>
                    <div><span class="pan-left-value">0.7</span>ppm</div>
                  </el-col>
                  <el-col :span="8" class="pan-left-img">
                    <el-image :src="monitor1" fit="fit" />
                  </el-col>
                </el-row>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="pan-left-each">
                <el-row :gutter="20">
                  <el-col :span="16">
                    <ul>
                      <li>硝酸根离子</li>
                    </ul>
                    <div><span class="pan-left-value">0.7</span>ppm</div>
                  </el-col>
                  <el-col :span="8" class="pan-left-img">
                    <el-image :src="monitor2" fit="fit" />
                  </el-col>
                </el-row>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="pan-left-each">
                <el-row :gutter="20">
                  <el-col :span="16">
                    <ul>
                      <li>铵离子</li>
                    </ul>
                    <div><span class="pan-left-value">0.7</span>ppm</div>
                  </el-col>
                  <el-col :span="8" class="pan-left-img">
                    <el-image :src="monitor3" fit="fit" />
                  </el-col>
                </el-row>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="pan-left-each">
                <el-row :gutter="20">
                  <el-col :span="16">
                    <ul>
                      <li>叶面湿度</li>
                    </ul>
                    <div><span class="pan-left-value">0.7</span>ppm</div>
                  </el-col>
                  <el-col :span="8" class="pan-left-img">
                    <el-image :src="monitor4" fit="fit" />
                  </el-col>
                </el-row>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="pan-left-each">
                <el-row :gutter="20">
                  <el-col :span="16">
                    <ul>
                      <li>叶面温度</li>
                    </ul>
                    <div><span class="pan-left-value">0.7</span>ppm</div>
                  </el-col>
                  <el-col :span="8" class="pan-left-img">
                    <el-image :src="monitor5" fit="fit" />
                  </el-col>
                </el-row>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="pan-left-each">
                <el-row :gutter="20">
                  <el-col :span="16">
                    <ul>
                      <li>PH值</li>
                    </ul>
                    <div><span class="pan-left-value">0.7</span>ppm</div>
                  </el-col>
                  <el-col :span="8" class="pan-left-img">
                    <el-image :src="monitor6" fit="fit" />
                  </el-col>
                </el-row>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-col>
      <el-col :span="10" style="position:relative;">
        <div class="tv-bg">
          <div style="margin:0 auto;width:90%;height:360px;background:black;" />
        </div>
        <div class="tv-sub" />
      </el-col>
      <el-col :span="8">
        <div class="pan-right">
          <div class="pan-title">气象监测</div>
          <el-row :gutter="20">
            <el-col :span="12">
              <div class="pan-right-each">
                <el-row :gutter="20">
                  <el-col :span="16">
                    <ul>
                      <li>空气温度</li>
                    </ul>
                    <div><span class="pan-right-value">18.6</span>℃</div>
                  </el-col>
                  <el-col :span="8" class="pan-right-img">
                    <el-image :src="screen1monitor" fit="fit" />
                  </el-col>
                </el-row>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="pan-right-each">
                <el-row :gutter="20">
                  <el-col :span="16">
                    <ul>
                      <li>空气湿度</li>
                    </ul>
                    <div><span class="pan-right-value">91.1</span>%</div>
                  </el-col>
                  <el-col :span="8" class="pan-right-img">
                    <el-image :src="screen2monitor" fit="fit" />
                  </el-col>
                </el-row>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="pan-right-each">
                <el-row :gutter="20">
                  <el-col :span="16">
                    <ul>
                      <li>气压</li>
                    </ul>
                    <div><span class="pan-right-value">100.6</span>hPa</div>
                  </el-col>
                  <el-col :span="8" class="pan-right-img">
                    <el-image :src="screen3monitor" fit="fit" />
                  </el-col>
                </el-row>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="pan-right-each">
                <el-row :gutter="20">
                  <el-col :span="16">
                    <ul>
                      <li>光照强度</li>
                    </ul>
                    <div><span class="pan-right-value">6346</span>Lux</div>
                  </el-col>
                  <el-col :span="8" class="pan-right-img">
                    <el-image :src="screen4monitor" fit="fit" />
                  </el-col>
                </el-row>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="pan-right-each">
                <el-row :gutter="20">
                  <el-col :span="16">
                    <ul>
                      <li>风向</li>
                    </ul>
                    <div><span class="pan-right-value">东风</span></div>
                  </el-col>
                  <el-col :span="8" class="pan-right-img">
                    <el-image :src="screen5monitor" fit="fit" />
                  </el-col>
                </el-row>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="pan-right-each">
                <el-row :gutter="20">
                  <el-col :span="16">
                    <ul>
                      <li>风速</li>
                    </ul>
                    <div><span class="pan-right-value">4.0</span>m/s</div>
                  </el-col>
                  <el-col :span="8" class="pan-right-img">
                    <el-image :src="screen6monitor" fit="fit" />
                  </el-col>
                </el-row>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="pan-right-each">
                <el-row :gutter="20">
                  <el-col :span="16">
                    <ul>
                      <li>降雨量</li>
                    </ul>
                    <div><span class="pan-right-value">0</span>mm/min</div>
                  </el-col>
                  <el-col :span="8" class="pan-right-img">
                    <el-image :src="screen7monitor" fit="fit" />
                  </el-col>
                </el-row>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="pan-right-each">
                <el-row :gutter="20">
                  <el-col :span="16">
                    <ul>
                      <li>土壤温度</li>
                    </ul>
                    <div><span class="pan-right-value">13.6</span>℃</div>
                  </el-col>
                  <el-col :span="8" class="pan-right-img">
                    <el-image :src="screen8monitor" fit="fit" />
                  </el-col>
                </el-row>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="pan-right-each">
                <el-row :gutter="20">
                  <el-col :span="16">
                    <ul>
                      <li>土壤湿度</li>
                    </ul>
                    <div><span class="pan-right-value">14.8</span>%</div>
                  </el-col>
                  <el-col :span="8" class="pan-right-img">
                    <el-image :src="screen9monitor" fit="fit" />
                  </el-col>
                </el-row>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="pan-right-each">
                <el-row :gutter="20">
                  <el-col :span="16">
                    <ul>
                      <li>土壤导电</li>
                    </ul>
                    <div><span class="pan-right-value">127</span>us/cm</div>
                  </el-col>
                  <el-col :span="8" class="pan-right-img">
                    <el-image :src="screen10monitor" fit="fit" />
                  </el-col>
                </el-row>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-col>
    </el-row>
    <!-- </div> -->
    <!-- <div style="height:200px;"> -->
    <el-row style="height:90px;text-align:center;">
      <el-col :span="4">
        <div class="img-small" @click="handleNetOfThing">
          <el-image :src="screen1Title" fit="fit" />
          <el-image :src="screen1" fit="fit" />
          <div class="screen-name">物联网展示</div>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="img-small" @click="handleTrainning">
          <el-image :src="screen2Title" fit="fit" />
          <el-image :src="screen2" fit="fit" />
          <div class="screen-name">教学实践</div>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="img-small">
          <el-image :src="screen3Title" fit="fit" />
          <el-image :src="screen3" fit="fit" />
          <div class="screen-name">农业信息化获取</div>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="img-small">
          <el-image :src="screen4Title" fit="fit" />
          <el-image :src="screen4" fit="fit" />
          <div class="screen-name">田间作业</div>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="img-small">
          <el-image :src="screen5Title" fit="fit" />
          <el-image :src="screen5" fit="fit" />
          <div class="screen-name">数据服务</div>
        </div>
      </el-col>
      <el-col :span="4">
        <div v-show="role!='student'" class="img-small" @click="handleSetting">
          <el-image :src="screen6Title" fit="fit" />
          <el-image :src="screen6" fit="fit" />
          <div class="screen-name">系统管理</div>
        </div>
      </el-col>
    </el-row>
    <!-- </div> -->
  </div>
</template>
<script>
import screen1 from '@/assets/images/screen/1.png'
import screen2 from '@/assets/images/screen/2.png'
import screen3 from '@/assets/images/screen/3.png'
import screen4 from '@/assets/images/screen/4.png'
import screen5 from '@/assets/images/screen/5.png'
import screen6 from '@/assets/images/screen/6.png'

import screen1Title from '@/assets/images/screen/1-title.png'
import screen2Title from '@/assets/images/screen/2-title.png'
import screen3Title from '@/assets/images/screen/3-title.png'
import screen4Title from '@/assets/images/screen/4-title.png'
import screen5Title from '@/assets/images/screen/5-title.png'
import screen6Title from '@/assets/images/screen/6-title.png'

import monitor1 from '@/assets/images/screen/monitor-1.png'
import monitor2 from '@/assets/images/screen/monitor-2.png'
import monitor3 from '@/assets/images/screen/monitor-3.png'
import monitor4 from '@/assets/images/screen/monitor-4.png'
import monitor5 from '@/assets/images/screen/monitor-5.png'
import monitor6 from '@/assets/images/screen/monitor-6.png'

import screen1monitor from '@/assets/images/screen/monitor-right-1.png'
import screen2monitor from '@/assets/images/screen/monitor-right-2.png'
import screen3monitor from '@/assets/images/screen/monitor-right-3.png'
import screen4monitor from '@/assets/images/screen/monitor-right-4.png'
import screen5monitor from '@/assets/images/screen/monitor-right-5.png'
import screen6monitor from '@/assets/images/screen/monitor-right-6.png'
import screen7monitor from '@/assets/images/screen/monitor-right-7.png'
import screen8monitor from '@/assets/images/screen/monitor-right-8.png'
import screen9monitor from '@/assets/images/screen/monitor-right-9.png'
import screen10monitor from '@/assets/images/screen/monitor-right-10.png'
export default {
  data() {
    return {
      role: '',
      // screenHeight:window.innerHeight +'px',
      screenHeight: '1000px',
      screen1,
      screen2,
      screen3,
      screen4,
      screen5,
      screen6,
      screen1Title,
      screen2Title,
      screen3Title,
      screen4Title,
      screen5Title,
      screen6Title,
      monitor1,
      monitor2,
      monitor3,
      monitor4,
      monitor5,
      monitor6,
      screen1monitor,
      screen2monitor,
      screen3monitor,
      screen4monitor,
      screen5monitor,
      screen6monitor,
      screen7monitor,
      screen8monitor,
      screen9monitor,
      screen10monitor
    }
  },
  created() {
    this.role = this.$store.getters.roles[0]
  },
  methods: {
    handleTrainning() {
      this.$router.push('/trainning/index')
    },
    handleSetting() {
      this.$router.push('/setting/index')
    },
    handleNetOfThing() {
      this.$router.push('/operation/oxyWatch')
    }
  }
}
</script>
<style scoped>
.screen-bg{
    width:100%;
    background:url('../../assets/images/screen-bg.png');
    color:white;
}
.screen-banner{
    width:100%;
    height:70px;
    background:url('../../assets/images/screen-banner.png');
    color:#95BEF6;
    font-size:40px;
    text-align:center;
    padding-top:10px;
}

.pan-left{
    margin:0 40px 0 10px;
    padding:10px 20px;
    height:610px;
    background:url('../../assets/images/screen/pan.png');
    background-repeat:no-repeat;
    background-size:100% auto;
}
.pan-right{
    margin:0 10px 0 40px;
    padding:10px 20px;
    height:610px;
    background:url('../../assets/images/screen/pan.png');
    background-repeat:no-repeat;
    background-size:100% auto;
}
.pan-title{font-size:20px;font-weight:bold;padding-left:24px;}
.pan-left-each{background:rgba(149,190,246,0.3);height:140px;margin-top:40px;border-radius:5px;}
.pan-right-each{background:rgba(149,190,246,0.3);height:95px;margin-top:15px;border-radius:5px;}
.pan-left-value{font-size:20px;font-weight:bold;margin-left:20px;}
.pan-right-value{font-size:20px;font-weight:bold;margin-left:20px;}
.pan-left-img{padding-top:40px;}
.pan-right-img{padding-top:40px;}

.tv-bg{
    /* width:100%; */
    height:610px;
    background:url('../../assets/images/screen/tv.png');
    background-repeat:no-repeat;
    background-size:100% auto;
    padding-top:40px;
}
.tv-sub{
    position:absolute;
    top:340px;
    left:0;
    width:100%;
    height:300px;
    background:url('../../assets/images/screen/7.png');
    background-repeat:no-repeat;
    background-size:100% auto;
}

.img-small{
    background:rgba(255,255,255,0.1);
    height:170px;
    margin-left:10px;
    margin-right:10px;
    cursor: pointer;
}
.screen-name{margin-top:20px;color:#6FF7F4;}
</style>
